<template>
  <view :id="'id_' + readId">
    <slot name="title">
      <tm-sheet
        v-if="_title !== ''"
        no-level
        :transprent="props.transprent"
        color="grey-3"
        :height="50"
        _class="flex flex-row flex-row-center-start"
        :margin="[props.margin[0], 0]"
        :padding="[props.padding[0], 0]"
        @click="emits('title-click')"
      >
        <tm-text
          :user-interaction-enabled="false"
          :font-size="24"
          _class="text-weight-b opacity-6"
          :label="_title"
        ></tm-text>
      </tm-sheet>
    </slot>
    <tm-sheet
      color="white"
      :border="props.showBorder ? 1 : 0"
      :transprent="props.transprent"
      border-direction="bottom"
      :margin="props.margin"
      :padding="props.padding"
      @click="itemClick"
    >
      <view :event-penetration-enabled="true" class="flex-1">
        <slot></slot>
      </view>
    </tm-sheet>
  </view>
</template>

<script lang="ts" setup>
/**
 * 列表索引项目
 * @description 索引列表项目，内部只能放置在tm-indexes组件中。
 */
import { computed, PropType, ref, getCurrentInstance, onUnmounted, onMounted, onUpdated, nextTick } from 'vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmText from '../tm-text/tm-text.vue'
const proxy = getCurrentInstance()?.proxy ?? null
const emits = defineEmits(['click', 'title-click'])
const props = defineProps({
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [32, 0],
  },
  height: {
    type: Number,
    default: 100,
  },
  //如果title不为空，此组件就会当分类标题来显示，并隐藏内容。
  title: {
    type: [String, Number],
    default: '',
  },
  // 右边快捷显示的标题，只能是一个字符。
  //注意如果title为空时，这个才会显示在右边。不空此字段无任何意义。
  navTitle: {
    type: [String, Number],
    default: '',
  },
  transprent: {
    type: Boolean,
    default: false,
  },
  showBorder: {
    type: Boolean,
    default: true,
  },
})

const _title = computed(() => props.title)
const _navTitle = computed(() => props.navTitle)
const readId = uni.$tm.u.getUid(1)
let _itemHeight = 0
//父级方法。
let parent: any = proxy.$parent

while (parent) {
  if (parent?.compentNameId == 'tmIndexesId' || !parent) {
    break
  } else {
    parent = parent?.$parent ?? undefined
  }
}
if (parent) {
  parent.pushKey(_itemHeight, readId, String(_title.value), String(_navTitle.value))
}
onUnmounted(() => parent.delKey(_itemHeight, readId))
onMounted(() => getRect())
onUpdated(() => getRect())
function getRect() {
  let id = '#id_' + readId
  // #ifdef MP
  uni
    .createSelectorQuery()
    .in(proxy)
    .select(id)
    .boundingClientRect()
    .exec((ret) => {
      _itemHeight = ret[0].height
      parent.pushKey(ret[0].height, readId, String(_title.value), String(_navTitle.value))
    })
  // #endif
}
function itemClick() {
  emits('click')
}
</script>

<style></style>
